<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    .top{
        border-bottom: 1px solid #EFEFEF;
        padding: 15px;
    }
    ul,li{
        margin: 0px;
        padding: 0px;
    }
    li{
        list-style: none
    }
    .page-bar li:first-child>a {
        margin-left: 0px
    }
    .page-bar a{
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #5D6062;
        cursor: pointer;
        margin-right: 20px;
    }
    .page-bar a:hover{
        background-color: #eee;
    }
    .page-bar a.banclick{
        cursor:not-allowed;
    }
    .page-bar .active a{
        color: #fff;
        cursor: default;
        background-color: #E96463;
        border-color: #E96463;
    }

    .page-bar i{
        font-style:normal;
        color: #d44950;
        margin: 0px 4px;
        font-size: 12px;
    }
</style>
<body>
<div id="app">
    <div class="top">
        <div><b>网贷审核</b></div>
    </div>
    <template>
        <div class="table">
            <el-table
                    :data="PersonUserList"
                    style="width: 100%">
                <el-table-column
                        prop="username"
                        label="账户"
                >
                </el-table-column>
                <el-table-column
                        prop="l_fund"
                        label="借贷资金"
                >
                </el-table-column>
                <el-table-column
                        prop="l_deadline"
                        label="借贷期限"
                >
                </el-table-column>
                <el-table-column
                        prop="cd_message"
                        label="个人信用"
                >
                </el-table-column>
                <el-table-column
                        prop="as_name"
                        label="审核状态"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="300">
                    <template slot-scope="scope">
                        <el-button class="btn btn-info" role="button" style="background-color: #23BAC2"
                                   @click="modify1(scope.row.ml_id,scope.row.username,scope.row.l_fund,scope.row.as_name,scope.row.uid)">审核通过</el-button>
                        <el-button class="btn btn-info" role="button" style="background-color: #FF7669"
                                   @click="modify2(scope.row.ml_id,scope.row.username,scope.row.l_fund,scope.row.as_name,scope.row.uid)">审核不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizePersonUser"
                    @current-change="handleCurrentPersonUser">
            </el-pagination>
        </div>
    </template>
</div>
</body>
<script type="text/javascript">
    new Vue( {
        el:"#app",
        data:{
            currentPage:1, //初始页
            pageSize:5,    //    每页的数据
            total:1,
            PersonUserList: [],

        },
        methods: {
            modify1(ml_id,username,l_fund,as_name,uid){
                if ("审核通过"==as_name){
                    alert("用户"+username+"的"+l_fund+"元网贷审核已通过。")
                }else {
                    if ("审核未通过"==as_name){
                        alert("用户"+username+"的"+l_fund+"元网贷审核已未通过。")
                    } else {
                        let msg = "确定通过用户"+username+"的"+l_fund+"元网贷申请吗？";
                        if (confirm(msg)==true){
                            axios.get("/loanAdminUpdate1/"+ml_id+"/"+uid).then(res=>{
                                alert("通过审核成功！！！");
                                window.location.href="loanCheck.html";
                            })
                            return true;
                        }else{
                            return false;
                        }
                    }
                }
            },
            modify2(ml_id,username,l_fund,as_name,uid){
                if ("审核通过"==as_name){
                    alert("用户"+username+"的"+l_fund+"元网贷审核已通过。")
                }else {
                    if ("审核未通过"==as_name){
                        alert("用户"+username+"的"+l_fund+"元网贷审核已未通过。")
                    } else {
                        let msg = "确定不通过用户"+username+"的"+l_fund+"元网贷申请吗？";
                        if (confirm(msg)==true){
                            axios.get("/loanAdminUpdate2/"+ml_id+"/"+uid).then(res=>{
                                alert("不通过审核成功！！！");
                                window.location.href="loanCheck.html";
                            })
                            return true;
                        }else{
                            return false;
                        }
                    }
                }
            },
            handleSizePersonUser(pageSize){
                this.pageSize = pageSize;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize)
            },

            showData(currentPage,pageSize){
                var PersonUser = this;
                axios.get("/loanAdmin/"+currentPage+"/"+pageSize).then(res=>{
                    console.log(res);
                    PersonUser.PersonUserList = res.data.list;
                    PersonUser.total = res.data.total;
                    console.log(res.data.list);
                })
            },
            handleCurrentPersonUser(currentPage){
                this.currentPage = currentPage;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize);
            }
        },created() {
            this.showData(1, 5)
        }
    })
</script>
</html>